<template>
	<view class="modex">

		<view class="top" :style="{'padding-top': paddingTop}">

			<view class="buttons">
				<view class="left">

					<!-- #ifndef MP-WEIXIN-->
					<view class="avatar">
						<image mode="aspectFill"
							src="https://www.cdn.kxcdedu.top/image/default/B96815CBEFBE481984ECAF4B1330CE67-6-2.png"></img>
					</view>
					<!-- #endif -->


					<view class="search" @click="toSearch" :style="{'height': inputHeight}">
						<uni-icons style="margin-left: 20rpx;margin-right: 10rpx;" type="search" size="25"
							color="#b8b8b8"></uni-icons>
						<view style="color: #b8b8b8;">搜索候浪内容</view>
					</view>
				</view>
			</view>

			<view class="tabs">
				<view v-for="(item,index) in tabs">
					<view v-if="$isLogin() || index != 2" @click="changeTab(index)" class="tab" :class="index == currentTabIndex ? 'tab-current': '' ">
						<view>{{item}}</view>
						<view v-if="index == currentTabIndex" class="tab-line"></view>
					</view>
				</view>
			</view>
		</view>


		<view class="content">
			<swiper class="swiper-content" duration="200" :style="{height:swiperHeight+'px'}" :current="currentTabIndex"
				@change="swiperChange">
				<swiper-item class="itemswiper">
					<view class="heat viewat" :id="'content-wrap' + currentTabIndex">
						<scroll-view scroll-y :style="{height:swiperHeight+'px'}" @scrolltolower="onScrollBottom">
							<view class="item-content">
								<view class="bonfire">
									<view class="slideshow">
										<image mode="aspectFill" style="width: 100%;height: 100%;border-radius: 20rpx;"
											src="https://img.zcool.cn/community/0140dd5b758b59a80120d8c000408f.jpg@1280w_1l_2o_100sh.jpg">
										</image>
									</view>

									<view class="bonfire-buttons">
										<view class="bonfire-button" @click="toFeedback">
											<view class="icon">
												<image
													src="https://www.cdn.kxcdedu.top/image/default/ABE3FD4B5C22411DAC59F66579D6DF51-6-2.png">
												</image>
											</view>
											<view class="text">内容精选</view>
										</view>
										<view class="bonfire-button" @click="toFeedback">
											<view class="icon">
												<image
													src="https://www.cdn.kxcdedu.top/image/default/7E9D3042C5404679A21A979F615CB9FB-6-2.png">
												</image>
											</view>
											<view class="text">发展历史</view>
										</view>
										<view class="bonfire-button" @click="toFeedback">
											<view class="icon">
												<image
													src="https://www.cdn.kxcdedu.top/image/default/2FD75BD91F22480198DACE574F8B0276-6-2.png">
												</image>
											</view>
											<view class="text">反馈建议</view>
										</view>
										<view class="bonfire-button" @click="toEncourage">
											<view class="icon">
												<image
													src="https://www.cdn.kxcdedu.top/image/default/E9E6477A133C455782E49063E9DB0BA0-6-2.png">
												</image>
											</view>
											<view class="text">候浪者说</view>
										</view>
									</view>


									<view class="fires">
										<view class="fire" v-for="fire in bonfires" @click="toBonfireDetail(fire.id)">
											<view class="cover">
												<image mode="aspectFill" :src="fire.cover"></image>
											</view>

											<view class="fire-info">
												<view class="title">{{fire.title}}</view>
												<view class="description">{{fire.description}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
				<swiper-item class="itemswiper">
					<view class="heat viewat" :id="'content-wrap' + currentTabIndex">
						<scroll-view scroll-y :style="{height:swiperHeight+'px'}" @scrolltolower="onScrollBottom">

							<view class="item-content">
								<view class="hot-question" v-for="(item, index) in hotQuestions" :key="index">
									<!-- <image :src="item.cover" @click="toQuestionDetail(item.id)" class="cover"></image> -->
									<view class="cover" @click="toQuestionDetail(item.id)">
										<view
											style="font-size: 38rpx;color: #6AB9C0;margin-bottom: 30rpx;font-weight: bold;">
											{{item.title}}
										</view>
										<view class="context" v-html="item.context"></view>
									</view>
									<view class="counts">
										<view class="item">
											<view class="item-top">
												{{item.followerCount}}
											</view>
											<view class="item-bottom">
												关注数
											</view>
										</view>
										<view class="item">
											<view class="item-top">
												{{item.pointCount}}
											</view>
											<view class="item-bottom">
												观点数
											</view>
										</view>
										<view class="item">
											<view class="item-top">
												{{item.answerCount}}
											</view>
											<view class="item-bottom">
												回答数
											</view>
										</view>
									</view>
									<view class="points">
										<view v-for="point in item.points" class="point"
											@click="toPointDetail(item.id,point.id)">
											<view class="point-text">{{point.keyword}}</view>
											<view class="point-avatar">
												<image mode="aspectFill" :src="point.avatar"></image>
											</view>
										</view>
									</view>
									<view class="split-line"></view>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
				<swiper-item class="itemswiper">
					<view class="heat viewat" :id="'content-wrap' + currentTabIndex">
						<scroll-view scroll-y :style="{height:swiperHeight+'px'}" @scrolltolower="onScrollBottom">
							<view class="item-content">
								<view class="scroll-x">
									<view class="rowItem" v-if="focusUsers" v-for="(item, index) in focusUsers"
										:key="index" @click="changeUser(item.id)">
										<view
											style="display: flex; flex-direction: column; justify-content: center; align-items: center;margin: 10rpx 0 5rpx; ">
											<image mode="aspectFill" class="focusInfo-avatar" :src="item.avatar">
											</image>
											<view
												style="font-size: 28rpx; color: rgb(48, 47, 47);margin-bottom: 10rpx;">
												{{ item.nickname }}
											</view>
											<view v-if="item.id === queryInput.userId"
												style="width: 20rpx;height: 5rpx;background-color: #6AB9C0;"></view>
										</view>
									</view>
								</view>
								<view class="mind-list">
									<view style="display: flex; flex-direction: column; margin-bottom: 30rpx;"
										v-if="focusMinds" v-for="(item, index) in focusMinds" :key="index">
										<view v-if="item.type != 4" @click="toQuestionDetail(item.questionListVO.id)"
											class="card">
											<view style="display: flex; flex-direction: row;align-items: center;">
												<image
													style="width: 50rpx; height: 50rpx; overflow: hidden; border-radius: 50%; margin-left: 20rpx"
													:src="item.avatar"></image>
												<view class="mind-date">{{ item.nickname }} {{ item.gmtCreate }}
													{{ mindType[item.type] }}
												</view>
											</view>
											<view class="question-title">{{ item.questionListVO.title }}</view>
											<view class="question-point">观点：{{ item.questionListVO.point }}</view>
											<view class="question-answer">
												回答：{{getSimpleText(item.questionListVO.answer)}}
											</view>
										</view>

										<view v-if="item.type == 4" class="card">
											<view style="display: flex; flex-direction: row;align-items: center;">
												<image mode="aspectFill"
													style="width: 50rpx; height: 50rpx; overflow: hidden; border-radius: 50%; margin-left: 20rpx"
													:src="item.avatar"></image>
												<view class="mind-date">{{ item.nickname }} {{ item.gmtCreate }}
													输出一条mind
												</view>
											</view>
											<view class="tip-content">{{ item.content }}</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
				<!-- <swiper-item class="itemswiper">
					<view class="heat viewat" :id="'content-wrap' + currentTabIndex">
						<scroll-view scroll-y :style="{height:swiperHeight+'px'}" @scrolltolower="onScrollBottom">
							<view class="item-content">
								<view class="questions" v-if="questions" v-for="(question,index) in questions">
									<view class="question">
										<view class="top-image">
											<view class="title">是什么在推着我们向上向善？我们前进的源动力是什么？</view>
											<view class="detail">问题详情>></view>
										</view>
										<view class="books">
											<view class="title">
												<view class="content-icon">
													<image mode="aspectFill" src="@/static/examples/book.png"></image>
												</view>
												<view style="margin-left: 10rpx;">书籍</view>
											</view>
											<view class="books-content">
												<view v-for="(book,index) in question.books">
													<view class="book">
														<view class="cover">
															<image mode="aspectFill" style="height: 100%;width: 100%;"
																:src="book.cover">
															</image>
														</view>
														<view class="name">{{book.name}}</view>
													</view>
												</view>
											</view>
										</view>
										<view class="movies">
											<view class="title">
												<view class="content-icon">
													<image mode="aspectFill" src="@/static/examples/movie.png"></image>
												</view>
												<view style="margin-left: 10rpx;">影视</view>
											</view>
											<view class="content">
												<view v-for="(movie,index) in question.movies">
													<view class="movie">
														<view class="cover">
															<image style="height: 100%;width: 100%;" :src="movie.cover">
															</image>
														</view>
														<view class="name">{{movie.name}}</view>
													</view>
												</view>
											</view>
										</view>
										<view class="articles">
											<view class="title">
												<view class="content-icon">
													<img src="@/static/examples/article.png"></img>
												</view>
												<view style="margin-left: 10rpx;">文章</view>
											</view>
											<view class="content">
												<view v-if="question.articles"
													v-for="(article,index) in question.articles">
													<view class="article"
														:style="{'border-bottom' : index === question.articles.length-1 ? 'none' : 'thin solid #e5e5e5'}">
														<view class="cover">
															<img :src="article.cover"></img>
														</view>
														<view class="left">
															<view class="article-title">{{article.title}}</view>
															<view class="article-summary">{{article.summary}}</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item> -->
				<swiper-item class="itemswiper">
					<view class="heat viewat" :id="'content-wrap' + currentTabIndex">
						<scroll-view scroll-y :style="{height:swiperHeight+'px'}" @scrolltolower="onScrollBottom">
							<view class="item-content">
								<view class="hular-list">
									<view class="hular" v-if="focusMinds" v-for="(item, index) in hulars" :key="index">
										<view @click="toHulaIntro(item.userInfo.id)" class="card">
											<view class="user-info">
												<image class="avatar" :src="item.userInfo.avatar"></image>
												<view class="date-nickname">
													<view class="nickname">{{ item.userInfo.nickname }}</view>
													<view class="date">{{ item.gmtCreate }} 成为了候浪者</view>
												</view>
											</view>
											<view class="question-title">{{ item.goal }}</view>
											<view class="question-point">个人爱好：{{ item.hobby}}</view>
											<view class="question-answer">
												飓风期望：{{item.description}}
											</view>
										</view>
										<view @click="toQuestionDetail(item.questionId)" class="card"
											style="margin-top: 20rpx;">
											<view class="question-title">{{ item.question }}</view>
											<view class="question-point">观点：{{ item.point }}</view>
											<view class="question-answer">
												回答：{{getSimpleText(item.answer)}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import http from '@/common/service/service.js';

	export default {
		data() {
			return {
				currentTabIndex: 1,
				swiperHeight: 0,



				// tabs: ["篝火", "热点", "关注", "超脱", "新声"],
				tabs: ["篝火", "热点", "关注", "新声"],
				hotQuestions: [],
				questions: [{
						id: "1465157930033623041",
						cover: "../../static/examples/question_cover.png",
						points: [{
								id: "",
								avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
								content: "工作效率大大提升"
							},
							{
								id: "",
								avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
								content: "审美需求逐渐高涨"
							}
						],
						books: [{
								id: "",
								cover: "https://pic.baike.soso.com/p/20140126/20140126201941-863300517.jpg",
								name: "社会契约论",
								link: ""
							},
							{
								id: "",
								cover: "https://img3.doubanio.com/lpic/s6476952.jpg",
								name: "务虚笔记",
								link: ""
							},
							{
								id: "",
								cover: "https://ts1.cn.mm.bing.net/th/id/R-C.a6331174292b42a4371b9d2f1d89a831?rik=1FI0%2f0nPwEi7jg&riu=http%3a%2f%2fdownload.broadview.com.cn%2fLargeCover%2f1709d44d765b2cf093fe&ehk=xuHEX3Z4SMVPwnmYLxUiB3lO01PX4UGaHVVm9J5L450%3d&risl=&pid=ImgRaw&r=0",
								name: "体验引擎",
								link: ""
							}
						],
						movies: [{
								id: "",
								cover: "https://pic4.zhimg.com/v2-2e1f235cdd44159c0e0b6882fd14ace1_qhd.jpg",
								name: "绿皮书",
								link: ""
							},
							{
								id: "",
								cover: "https://img.zcool.cn/community/0154db5dd36dc2a8012129e29599a9.jpg@2o.jpg",
								name: "海上钢琴师",
								link: ""
							},
							{
								id: "",
								cover: "https://ts1.cn.mm.bing.net/th/id/R-C.c9823ba6865f969de17180dd574dc2b7?rik=hOdHyb0E66059g&riu=http%3a%2f%2fimg.doooor.com%2fimg%2fforum%2f201706%2f23%2f022955s1qox2uvro2roj2r.jpg&ehk=hcpy99EyFdVY%2bvZi%2fY94Q8lin%2bIKlK8nHjNg3gDp7vE%3d&risl=&pid=ImgRaw&r=0",
								name: "肖申克的救赎",
								link: ""
							}
						],
						articles: [{
								id: "",
								cover: "https://pic4.zhimg.com/v2-2e1f235cdd44159c0e0b6882fd14ace1_qhd.jpg",
								title: "灾后郑州-当一座都市忽然失去了互联网",
								summary: "在水灾之后的郑州，一个同时拥有水、电、互联网的人是无比幸运的。停水最为普遍。超市中，.....",
								link: ""
							},
							{
								id: "",
								cover: "https://img.zcool.cn/community/0154db5dd36dc2a8012129e29599a9.jpg@2o.jpg",
								title: "灾后郑州-当一座都市忽然失去了互联网",
								summary: "在水灾之后的郑州，一个同时拥有水、电、互联网的人是无比幸运的。停水最为普遍。超市中，.....",
								link: ""
							},
							{
								id: "",
								cover: "https://ts1.cn.mm.bing.net/th/id/R-C.c9823ba6865f969de17180dd574dc2b7?rik=hOdHyb0E66059g&riu=http%3a%2f%2fimg.doooor.com%2fimg%2fforum%2f201706%2f23%2f022955s1qox2uvro2roj2r.jpg&ehk=hcpy99EyFdVY%2bvZi%2fY94Q8lin%2bIKlK8nHjNg3gDp7vE%3d&risl=&pid=ImgRaw&r=0",
								title: "灾后郑州-当一座都市忽然失去了互联网",
								summary: "在水灾之后的郑州，一个同时拥有水、电、互联网的人是无比幸运的。停水最为普遍。超市中，.....",
								link: ""
							}
						]
					},
					{
						id: "1460811589732028417",
						cover: "../../static/examples/question_cover.png",
						points: [{
								id: "",
								avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
								content: "工作效率大大提升"
							},
							{
								id: "",
								avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
								content: "审美需求逐渐高涨"
							}
						],
						books: [{
								id: "",
								cover: "",
								name: "",
								link: ""
							},
							{
								id: "",
								cover: "",
								name: "",
								link: ""
							}
						]
					},
				],
				bonfires: [],

				queryInput: {
					userId: null,
					pageNow: 1,
					pageSize: 20,
					total: 0,
				},

				hularQueryInput: {
					pageNow: 1,
					pageSize: 20,
					total: 0,
				},

				mindType: ['', '发起一个讨论', '提出一个观点', '输出一个回答', '输出一条mind'],
				focusMinds: [],
				focusUsers: [],
				hulars: [],


				paddingTop: null,
				inputHeight: "70rpx"
			}
		},
		onShow() {
			this.$nextTick(() => {
				this.setSwiperHeight();
			});
			
			this.listQuestionBonfire();
			this.listHotQuestion();
			this.pageHular();
			
			if(this.$isLogin()){
				this.listUserFollow();
				this.pageFocusMind();
			}
		},
		onLoad() {
			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 2.获取状态栏高度
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();

			// 4.计算出导航栏高度  换算成rpx
			let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);

			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx'; 
			this.inputHeight = menuButton.height * (750 / windowWidth) + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';

			// #endif
		},
		/* onReachBottom() {
			console.log("触底",this.currentTabIndex)
		}, */
		methods: {
			changeTab(index) {
				this.currentTabIndex = index
			},
			changeUser(userId) {
				if (this.queryInput.userId == userId) {
					this.queryInput.userId = null
				} else {
					this.queryInput.userId = userId
				}
				this.pageFocusMind()
			},
			onScrollBottom() {
				// 每个 swiper-item 内 scroll-view 的单独触底
				console.log("触底", this.currentTabIndex)
				if (this.currentTabIndex == 2) {
					this.queryInput.pageNow++
					http.get('/mind/pageFocusOrderByTime', this.queryInput).then(res => {
						this.focusMinds = [...this.focusMinds, ...res.data.rows]
					})
				}
			},
			// 滑动切换导航
			swiperChange(e) {
				this.currentTabIndex = e.detail.current
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			setSwiperHeight() {
				let element = "#content-wrap" + this.currentTabIndex;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeight = uni.getSystemInfoSync().windowHeight - 130;
						// #ifdef H5
						this.swiperHeight = uni.getSystemInfoSync().windowHeight - 100;
						// #endif
					}
				});
			},
			listUserFollow() {
				this.$api.listUserFollow().then(res => {
					this.focusUsers = res.data
					this.focusUsers.unshift({
						id: null,
						avatar: "https://www.cdn.kxcdedu.top/image/default/91094B4B0D4F439EA934C3D17E10A575-6-2.png",
						nickname: "全部"
					})
				})
			},

			pageFocusMind() {
				this.queryInput.pageNow = 1
				http.get('/mind/pageFocusOrderByTime', this.queryInput).then(res => {
					this.focusMinds = res.data.rows
				})
			},
			pageHular() {
				this.hularQueryInput.pageNow = 1
				this.$api.pageHular(this.hularQueryInput).then(res => {
					this.hulars = res.data.rows
					this.hularQueryInput.total = res.data.total
				})
			},

			listHotQuestion() {
				this.$api.listHotQuestion().then(res => {
					this.hotQuestions = res.data
				})
			},
			listQuestionBonfire() {
				this.$api.listQuestionBonfire().then(res => {
					this.bonfires = res.data
				})
			},

			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search?type=0'
				})
			},

			toBonfireDetail(bonfireId) {
				if(!this.$isLogin()){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages_modex/bonfire/bonfire-detail?bonfireId=' + bonfireId,
				});
			},

			toFeedback() {
				uni.showToast({
					icon:'none',
					title:"开发ing"
				})
				// uni.navigateTo({
				// 	url: '/pages_modex/bonfire/feedback',
				// });
			},

			toEncourage() {
				uni.showToast({
					icon:'none',
					title:"开发ing"
				})
				// uni.navigateTo({
				// 	url: '/pages_modex/bonfire/encourage',
				// });
			},

			toQuestionDetail(questionId) {
				if(!this.$isLogin()){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages_modex/question/question-detail?questionId=' + questionId,
				});
			},

			toPointDetail(questionId, pointId) {
				if(!this.$isLogin()){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages_modex/question/answer?questionId=' + questionId + '&pointId=' + pointId,
				});
			},
			
			toHulaIntro(id) {
				if(!this.$isLogin()){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages_self/hula/hula-intro?userId='+id
				})
			},

			getSimpleText(html) {
				var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
				var msg = html.replace(re1, ''); //执行替换成空字符
				return msg;
			},
		}
	}
</script>

<style scoped lang="scss">
	.modex {

		width: 750rpx;

		.top {
			width: 690rpx;
			padding: 100rpx 30rpx 10rpx 30rpx;
			height: 145rpx;
			// #ifdef MP-WEIXIN
			padding-top: 95rpx;
			// #endif

			// #ifdef H5
			padding-top: 38rpx;
			// #endif

			background-image: url(https://www.cdn.kxcdedu.top/image/default/7C4BD29FBC644AA5BB5A2C86FD789335-6-2.png);
			background-repeat: no-repeat;
			// background-size: cover;

			display: flex;
			flex-direction: column;

			position: sticky;
			top: 0;
			z-index: 1;

			box-shadow: 0 0 12rpx 4rpx #DAEFEE;

			.buttons {

				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;



				.left {

					display: flex;
					flex-direction: row;
					align-items: center;

					.avatar {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50rpx;
						overflow: hidden;
						border: solid #FFFFFF;
						margin-right: 30rpx;



					}

					.search {
						margin-right: 30rpx;
						height: 70rpx;
						width: 580rpx;

						// #ifdef MP-WEIXIN
						width: 500rpx;
						// #endif

						display: flex;
						flex-direction: row;
						align-items: center;
						border-radius: 50rpx;

						background-color: rgba(255, 255, 255, 1);
					}

				}

				.right {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;

					.icon {
						width: 50rpx;
						height: 50rpx;
						margin-left: 20rpx;
					}


				}

			}

			.tabs {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 20rpx;

				.tab {
					margin-right: 30rpx;
					color: gray;
					height: 60rpx;

					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
				}

				.tab-current {
					color: #2c2c2c;
					font-weight: bold;
				}

				.tab-line {
					width: 40rpx;
					height: 7rpx;
					border-radius: 5rpx;
					background-color: #2c2c2c;
				}


			}


		}



		.content {
			display: flex;
			flex-direction: column;
			width: 100%;

			.swiper-content {
				width: 100%;
				height: 100%;

				background-image: url(https://www.cdn.kxcdedu.top/image/default/D69DDD368BB44C0C87647CC0E911EA32-6-2.png);
				background-repeat: no-repeat;
				background-size: cover;

				.itemswiper {
					display: flex;
					flex-direction: column;
				}
			}

			.item-content {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				width: 690rpx;
				margin-left: 30rpx;

				.bonfire {
					display: flex;
					flex-direction: column;
					width: 100%;

					.slideshow {
						width: 100%;
						height: 340rpx;
						background-color: gray;
						border-radius: 20rpx;
					}

					.bonfire-buttons {
						width: 100%;

						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin-top: 40rpx;

						.bonfire-button {
							width: 150rpx;
							height: 150rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							border-radius: 20rpx;

							background-color: rgba(255, 255, 255, 0.8);

							.icon {
								width: 70rpx;
								height: 70rpx;
								border-radius: 20rpx;
								overflow: hidden;
							}

							.text {
								margin-top: 10rpx;
								font-size: 24rpx;
								color: #595959;
							}
						}
					}



					.fires {
						width: 100%;

						display: flex;
						flex-direction: column;
						margin-top: 30rpx;

						.fire {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 30rpx;
							height: 100rpx;
							width: 630rpx;
							padding: 30rpx;
							background-color: rgba(255, 255, 255, 0.8);
							box-shadow: 0 0 8px 2px #f0f4f0;
							border-radius: 20rpx;

							.cover {
								height: 100rpx;
								width: 100rpx;
								background-color: #FFFFFF;
								border-radius: 20rpx;
								overflow: hidden;
							}



							.fire-info {
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: space-between;
								width: 500rpx;
								height: 100rpx;

								.title {
									// font-size: 36rpx;
								}

								.description {
									font-size: 28rpx;

									/*超过范围进行隐藏不显示*/
									overflow: hidden;
									/*文本溢出, 使用省略号 */
									text-overflow: ellipsis;
									/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
									display: -webkit-box;
									/*限制块容器显示的文本行数, 按照你的需求设置*/
									-webkit-line-clamp: 1;
									/*盒子的方向, 垂直、水平等*/
									-webkit-box-orient: vertical;
									/*文字换行, 可以在单词内断*/
									word-wrap: break-word;
								}

								.nickname {
									font-size: 28rpx;
									color: gray;
								}

							}


						}

					}
				}

				.scroll-x {
					display: flex;
					flex-direction: row;
					width: 100%;
					overflow-x: scroll;

					background-color: white;
					// box-shadow: 1px 1px 8px 2px #e9eee9;
					border-radius: 20rpx;
					margin-bottom: 30rpx;

					.rowItem {
						width: 100rpx;
						margin: 20rpx 0 20rpx 20rpx;

						.focusInfo-avatar {
							display: flex;
							overflow: hidden;
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}
					}
				}

				.mind-list {
					.card {
						padding-top: 20rpx;
						background-color: white;
						// box-shadow: 1px 1px 8px 2px #e9eee9;
						border-radius: 20rpx;

						.mind-date {
							color: gray;
							font-size: 25rpx;
							margin-left: 20rpx;
							margin-right: 10rpx;
						}

						.question-title {
							margin-left: 20rpx;
							margin-right: 10rpx;
							margin-top: 10rpx;
							font-size: 36rpx;
							font-weight: bold;
							color: #000222;
						}

						.question-point {
							margin-left: 20rpx;
							margin-right: 20rpx;
							margin-top: 10rpx;
							color: rgb(43, 42, 42);
							margin-bottom: 10rpx;
							line-height: 45rpx;
						}

						.question-answer {
							margin-left: 20rpx;
							margin-right: 20rpx;
							margin-bottom: 20rpx;
							color: rgb(43, 42, 42);
							line-height: 45rpx;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 3;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}

						.tip-content {
							margin-left: 20rpx;
							margin-right: 10rpx;
							margin-bottom: 20rpx;
							margin-top: 10rpx;
							color: rgb(43, 42, 42);
						}

					}
				}

				.hot-question {
					display: flex;
					flex-direction: column;
					margin-bottom: 30rpx;
					line-height: 50rpx;


					.cover {
						width: 630rpx;
						padding: 40rpx 30rpx 40rpx;

						border-radius: 20rpx;
						overflow: hidden;
						background-color: #FFFFFF;

						color: #2c2c2c;

						.context {
							// /deep/p {
							// 	margin: 20rpx 0;
							// }

							/deep/img {
								width: 100%;
							}
						}
					}

					.counts {
						font-size: 28rpx;
						width: 690rpx;
						border-radius: 20rpx;
						margin-top: 20rpx;
						background-color: #FFFFFF;
						display: flex;
						flex-direction: row;
						justify-content: space-around;
						align-items: center;

						.item {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;
							width: 150rpx;
							padding: 20rpx 0;

							.item-top {
								font-size: 32rpx;
								color: #6AB9C0;
							}

							.item-bottom {
								font-size: 28rpx;
								color: #6AB9C0;
							}
						}
					}


					.points {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						margin-top: 20rpx;


						.point {
							width: 630rpx;
							padding: 20rpx 30rpx;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							background-color: #FFFFFF;
							border-radius: 20rpx;
							margin-bottom: 20rpx;

							.point-text {
								width: 550rpx;
							}

							.point-avatar {
								height: 50rpx;
								width: 50rpx;

								image {
									width: 100%;
									height: 100%;
									border-radius: 50rpx;
								}
							}
						}
					}

					.split-line {
						background-color: #c5c5c5;
						width: 100%;
						height: 1rpx;
						margin-top: 20rpx;
						margin-bottom: 20rpx;
					}
				}


				.hular-list {

					.hular {
						display: flex;
						flex-direction: column;
						margin-bottom: 30rpx;

						.user-info {
							display: flex;
							flex-direction: row;
							align-items: center;


							.avatar {
								width: 70rpx;
								height: 70rpx;
								overflow: hidden;
								border-radius: 50%;
								margin-left: 20rpx
							}

							.date-nickname {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								margin-left: 20rpx;

								.nickname {}

								.date {
									color: gray;
									font-size: 25rpx;
								}
							}


						}





						.question-title {
							margin-left: 20rpx;
							margin-right: 10rpx;
							margin-top: 10rpx;
							font-size: 36rpx;
							font-weight: bold;
							color: #000222;
						}

						.question-point {
							margin-left: 20rpx;
							margin-right: 20rpx;
							margin-top: 10rpx;
							color: rgb(43, 42, 42);
							margin-bottom: 10rpx;
							line-height: 45rpx;
						}

						.question-answer {
							margin-left: 20rpx;
							margin-right: 20rpx;
							margin-bottom: 20rpx;
							color: rgb(43, 42, 42);
							line-height: 45rpx;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 3;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}

						.tip-content {
							margin-left: 20rpx;
							margin-right: 10rpx;
							margin-bottom: 20rpx;
							margin-top: 10rpx;
							color: rgb(43, 42, 42);
						}
					}

					.card {
						padding-top: 20rpx;
						background-color: white;
						// box-shadow: 1px 1px 8px 2px #e9eee9;
						border-radius: 20rpx;
					}
				}

				.title {
					display: flex;
					flex-direction: row;
					justify-content: center;
					font-weight: bold;
				}

				.questions {
					width: 690rpx;

					.content-icon {
						width: 40rpx;
						height: 40rpx;
					}

					.question {
						margin-bottom: 40rpx;

						.top-image {
							width: 630rpx;
							padding: 30rpx 30rpx;
							background-color: #FFFFFF;
							// box-shadow: 1px 1px 8px 2px #e9eee9;
							background-size: 100% 100%;
							border-radius: 20rpx;

							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: flex-start;

							background-repeat: no-repeat;
							background-size: cover;

							.title {
								font-size: 36rpx;
								color: #2c2c2c;
							}

							.detail {
								width: 630rpx;
								font-size: 28rpx;
								display: flex;
								flex-direction: row;
								justify-content: flex-end;
								color: #828282;
							}

						}

						.books {
							margin-top: 30rpx;
							width: 100%;
							background-color: #ffffff;
							// box-shadow: 1px 1px 8px 2px #e9eee9;
							border-radius: 20rpx;

							display: flex;
							flex-direction: column;
							align-items: flex-start;

							.title {
								margin-top: 30rpx;
								margin-left: 40rpx;
								font-weight: bold;

								display: flex;
								flex-direction: row;
								align-items: center;
							}

							.books-content {
								width: 610rpx;
								padding-left: 20rpx;
								margin: 20rpx 20rpx 20rpx 20rpx;

								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;

								.book {
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									align-items: center;
									height: 310rpx;


									.cover {
										height: 270rpx;
										width: 180rpx;
										overflow: hidden;
									}

									.name {
										font-size: 28rpx;
									}
								}
							}
						}

						.movies {
							margin-top: 30rpx;
							width: 100%;
							background-color: #ffffff;
							// box-shadow: 1px 1px 8px 2px #e9eee9;
							border-radius: 20rpx;

							display: flex;
							flex-direction: column;
							align-items: flex-start;

							.title {
								margin-top: 30rpx;
								margin-left: 40rpx;
								font-weight: bold;

								display: flex;
								flex-direction: row;
								align-items: center;
							}

							.content {
								width: 610rpx;
								padding-left: 20rpx;
								margin: 20rpx 20rpx 20rpx 20rpx;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: space-between;

								.movie {
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									align-items: center;
									height: 310rpx;


									.cover {
										height: 270rpx;
										width: 180rpx;
										overflow: hidden;
									}

									.name {
										font-size: 28rpx;
									}
								}
							}
						}

						.articles {
							margin-top: 30rpx;
							width: 100%;
							background-color: #ffffff;
							// box-shadow: 1px 1px 8px 2px #e9eee9;
							border-radius: 20rpx;

							display: flex;
							flex-direction: column;
							align-items: flex-start;

							.title {
								margin-top: 30rpx;
								margin-left: 40rpx;
								font-weight: bold;

								display: flex;
								flex-direction: row;
								align-items: center;
							}

							.content {
								width: 640rpx;
								min-height: 300rpx;
								margin: 20rpx 20rpx 0 20rpx;
								display: flex;
								flex-direction: column;

								.article {
									display: flex;
									flex-direction: row;
									justify-content: space-between;
									margin-left: 20rpx;
									height: 180rpx;
									margin-bottom: 20rpx;



									.cover {
										height: 160rpx;
										width: 240rpx;
										border-radius: 10rpx;
										overflow: hidden;
									}

									.left {
										width: 360rpx;
										margin-top: 5rpx;
										height: 150rpx;
										display: flex;
										flex-direction: column;
										justify-content: space-between;

										.article-title {
											font-size: 28rpx;
											width: 100%;


											/*超过范围进行隐藏不显示*/
											overflow: hidden;
											/*文本溢出, 使用省略号 */
											text-overflow: ellipsis;
											/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
											display: -webkit-box;
											/*限制块容器显示的文本行数, 按照你的需求设置*/
											-webkit-line-clamp: 2;
											/*盒子的方向, 垂直、水平等*/
											-webkit-box-orient: vertical;
											/*文字换行, 可以在单词内断*/
											word-wrap: break-word;
										}

										.article-summary {
											color: gray;

											font-size: 28rpx;
											/*超过范围进行隐藏不显示*/
											overflow: hidden;
											/*文本溢出, 使用省略号 */
											text-overflow: ellipsis;
											/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
											display: -webkit-box;
											/*限制块容器显示的文本行数, 按照你的需求设置*/
											-webkit-line-clamp: 2;
											/*盒子的方向, 垂直、水平等*/
											-webkit-box-orient: vertical;
											/*文字换行, 可以在单词内断*/
											word-wrap: break-word;
										}


									}
								}
							}
						}

					}
				}

			}
		}



	}

	image {
		width: 100%;
		height: 100%;
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>
